<template>
  <div>
    <div id="back">
      <i class="el-icon-back" @click="$router.go(-1)"></i>
    </div>
    <div id="login">
      <a href=" http://127.0.0.1:5173/">
        <el-button icon="el-icon-user" circle></el-button>
      </a>
    </div>

    <animated-wallpaper
      :number="100"
      :linked="false"
      :speed="8"
      mode="repulse"
      :bg-img="require('@/assets/images/bg1.jpg')"
    />
    <div class="container">
      <div class="cards">
        <div class="card" id="card-b">
          <div class="colour"></div>
          <div class="card-text" id="test-b">
            <h3>第十一组</h3>
            <p>刘巧稚(组长)</p>
            <p>连晓亚</p>
            <p>张涛</p>
          </div>
          <div class="colour-bottom"></div>
        </div>
        <div class="card nezuko">
          <div class="colour"></div>
          <div class="card-text">
            <h3>码云地址</h3>
            <p>
              <a href="https://gitee.com/eleven-code-teams">read more</a>
            </p>
          </div>
          <div class="colour-bottom"></div>
        </div>
        <div class="card zenitsu">
          <div class="colour"></div>
          <div class="card-text">
            <h3>语雀地址</h3>
            <p>
              <a href="https://liuqiaozhi.yuque.com/staff-bz469v/lknfo2">
                learn more
              </a>
            </p>
          </div>
          <div class="colour-bottom"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import AnimatedWallpaper from '@/views/Films/Childs/components/AnimatedWallpaper.vue'

export default {
  name: 'Trial',
  components: {
    AnimatedWallpaper,
  },
}
</script>

<style scoped>
@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&family=Fira+Mono:wght@500&display=swap');
body {
  min-height: 95vh;
  background: #080808;
  display: flex;
  justify-content: center;
  align-items: center;

  flex-wrap: wrap;
  font-family: 'Fira Mono', monospace;
}
* {
  box-sizing: border-box;
}
#back {
  position: absolute;
  top: 2%;
  left: 2%;
}
[class*=' el-icon-'],
[class^='el-icon-'] {
  font-family: element-icons !important;
  speak: none;
  font-style: normal;
  font-weight: 600;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: xxx-large;
  color: #ffffff;
}
/*  */
#card-b {
  margin-top: 20%;
}
#test-b {
  transform: translateY(-50px);
}
/*  */
#login {
  position: absolute;
  top: 2.5%;
  right: 2%;
}
.el-button {
  opacity: 0.8;
}
/*  */
h3 {
  font-family: 'Permanent Marker', cursive;
}
.container {
  margin-left: 7%;
  width: 85%;
  height: 85%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cards {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}
.card {
  overflow: hidden;
  text-align: center;
  position: relative;
  width: 300px;
  height: 270px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 50px;
  /*background: linear-gradient(145deg, #e6e6e6, #ffffff);
   */
  box-shadow: 30px 30px 40px #141313, -30px -30px 40px #1c1919;
  transform: scale(1.05);
  margin: 2rem;
}

.colour {
  position: absolute;
  width: 100%;
  height: 15%;
  background: rgb(255, 60, 14);
  background: linear-gradient(
    125deg,
    rgba(255, 60, 14, 1) 28%,
    rgba(255, 255, 102, 1) 89%
  );
  right: 120px;
  top: 40px;
  transform: rotate(-45deg) translateY(-90px);
}
.colour::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 40px;
  background-color: #ff3c0e;
  transform: translateX(-145px);
}
.colour-bottom {
  position: absolute;
  width: 100%;
  height: 15%;
  background-color: rgba(97, 34, 28, 1);
  left: 140px;
  top: 245px;
  transform: rotate(-45deg) translateY(95px);
}
.colour-bottom::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 40px;
  background: rgb(97, 34, 28);
  background: linear-gradient(
    331deg,
    rgba(97, 34, 28, 1) 40%,
    rgba(125, 215, 178, 1) 66%
  );
  transform: translateX(-147px);
}
.nezuko {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.nezuko .colour {
  background: rgb(227, 121, 130);
  background: linear-gradient(
    125deg,
    rgba(227, 121, 130, 1) 28%,
    rgba(172, 24, 69, 1) 89%
  );
}
.nezuko .colour::before {
  background: rgba(172, 24, 69, 1);
}
.nezuko .colour-bottom {
  background: rgba(128, 23, 34, 1);
}
.nezuko .colour-bottom::before {
  background: rgb(128, 23, 34);
  background: linear-gradient(
    125deg,
    rgba(128, 23, 34, 1) 40%,
    rgba(60, 29, 40, 1) 66%
  );
}
.zenitsu {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.zenitsu .colour {
  background: rgb(254, 241, 163);
  background: linear-gradient(
    125deg,
    rgba(254, 241, 163, 1) 40%,
    rgba(254, 233, 88, 1) 59%
  );
}
.zenitsu .colour::before {
  background: rgba(254, 233, 88, 1);
}
.zenitsu .colour-bottom {
  background: rgb(224, 153, 45);
}
.zenitsu .colour-bottom::before {
  background: rgb(224, 153, 45);
  background: linear-gradient(
    125deg,
    rgba(224, 153, 45, 1) 40%,
    rgba(176, 123, 0, 1) 60%
  );
}
.card-text {
  opacity: 0;
  position: relative;
  top: 80px;
  font-size: 120%;
}
.card:hover {
  border-radius: 50px;
  background: linear-gradient(145deg, #e6e6e6, #ffffff);
  box-shadow: 30px 30px 40px #141313, -30px -30px 40px #1c1919;
  animation: large 0.7s ease-in-out forwards;
}
@keyframes large {
  100% {
    transform: scale(0.85);
  }
}
.card:hover .card-text {
  opacity: 1;
}
.card:hover .colour {
  animation: move 0.7s ease-in-out forwards;
}
@keyframes move {
  0% {
    transform: rotate(-45deg) translateY(-85px);
  }
  100% {
    transform: rotate(-45deg) translateY(0px);
  }
}
.card:hover .colour-bottom {
  animation: move1 0.7s ease-in-out forwards;
}
@keyframes move1 {
  0% {
    transform: rotate(-45deg) translateY(90px);
  }
  100% {
    transform: rotate(-45deg) translateY(0px);
  }
}
footer {
  width: 80%;
  height: 100px;
  color: white;
  text-align: center;
  position: relative;
  bottom: 0;
}
a {
  text-decoration: none;
  color: rgba(224, 153, 45, 1);
}
</style>
